﻿<div class="panel panel-primary">
    <div class="panel-heading">

        <h3 class="panel-title"><i class="fa fa-file-powerpoint-o"></i>&nbsp;&nbsp;Pregunta</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" role="form">
            <input type="hidden" name="id" id="id" value="{{IdPregunta}}" />

            <div class="form-group" id="areaCategoriaGroup">
                <label for="area" class="col-sm-2 control-label">Area</label>
                <div class="col-sm-4">
                    <select name="area" id="area" class="form-control">
                        <option value="ENG">Inglés</option>
                    </select>
                </div>
                <label for="categoria" class="col-sm-1 control-label">Categoria</label>
                <div class="col-sm-4">
                    <select name="categoria" id="categoria" class="form-control">
                        {{#each CategoriaPregunta}}
                        <option value="{{ValorCatalogo}}">{{NombreCatalogo}}</option>
                        {{/each}}
                    </select>
                </div>
            </div>

            <div class="form-group" id="tipoGroup">
                <label for="tipo" class="col-sm-2 control-label">Tipo de pregunta</label>
                <div class="col-sm-4">
                    <select name="tipo" id="tipo" class="form-control">
                        {{#each TipoPregunta}}
                        <option value="{{ValorCatalogo}}">{{NombreCatalogo}}</option>
                        {{/each}}
                    </select>
                </div>


                <label for="estado" class="col-sm-1 control-label">Estado:</label>
                <div class="col-sm-4">
                    <select name="estado" id="estado" class="form-control">
                        {{#each EstadosPregunta}}
                        <option value="{{ValorCatalogo}}">{{NombreCatalogo}}</option>
                        {{/each}}
                    </select>
                </div>
            </div>


            <div class="form-group" id="enunciadoGroup">
                <label for="inputEnunciado" class="col-sm-2 control-label">Enunciado</label>
                <div class="col-sm-9">
                    <!--<input type="text" class="form-control" id="inputEnunciado" placeholder="Enunciado" value="{{Enunciado}}" aria-multiline="true">-->
                    <textarea class="form-control" id="enunciado" placeholder="Enunciado" aria-multiline="true" rows="10">{{Enunciado}}</textarea>
                </div>
            </div>
            <br />
            <br />
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Recurso</h3>
                </div>
                <div class="panel-body">
                    {{#if Recursos}}{{#each Recursos}}{{#if_eq CodigoTipo "IMG"}}
                        <img id="imagenRecurso" src="http://localhost/ExcellentProject.Cuestionarios/api/streamming?filename={{Uri}}&ext=jpeg" alt="Ima" style="margin: 0 auto; width: 400px;" />{{/if_eq}}{{#if_eq CodigoTipo "VID"}}
                        <video id="videoRecurso" controls="controls">
                            <source src="http://localhost/ExcellentProject.Cuestionarios/api/streamming?filename={{Uri}}&ext=mp4" type="video/mp4" style="margin: 0 auto; width: 400px;" />
                        </video>{{/if_eq}}{{#if_eq CodigoTipo "SND"}}
                        <audio id="audioRecurso" controls="controls">
                            <source src="http://localhost/ExcellentProject.Cuestionarios/api/streamming?filename={{Uri}}&ext=mp3" type="audio/mp3" style="margin: 0 auto; width: 400px;" />
                        </audio>{{/if_eq}}{{/each}}
                        {{/if}}
                    </div>
                    <a href="#" class="seleccionarRecursos btn btn-primary">Seleccione un recurso existente</a>
                    <a href="#" class="btn btn-primary borrarRecurso" >Borrar Recurso</a>
                    <a href="/recursos/seleccionar" style="visibility: hidden" id="seleccionarRecurso"></a>

                    <input type="hidden" id="idRecurso" value="" />
                    <div class="col-sm-offset-2 col-sm-8">
                        <div class="row" id="imageViewer">
                            <img src="#" alt="dsf" id="imageDisplay" />
                            <img />
                        </div>
                        <div class="row" id="audioPlayer">
                            <audio controls="controls" src="#" id="audioDisplay" autoplay="autoplay"></audio>
                        </div>
                        <div class="row" id="videoPlayer">
                            <video width="600" height="480" controls="controls" autoplay="autoplay" id="videoDisplay">
                                <source src="#" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
            </div>
            <br />


            <div id="opcionesSeleccionSimple" class="panel panel-info" >
                <div class="panel-heading">
                    <h3 class="panel-title">Opciones</h3>
                </div>
                <div class="alert alert-info" role="alert">
                    <p style="text-align:center"><b>Ingrese las posibles respuestas a la pregunta y elija una OPCION que desea que sea la CORRECTA.</b></p>
                </div>
                <div class="panel-body" >
                    <label for="inputOpcionSimple1" class="col-sm-2 control-label">Opción 1 </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="inputOpcionSimple1" placeholder="Opcion1" value="{{Opcion1.Descripcion}}" aria-multiline="true">
                    </div>
                    <div class="col-sm-2">
                        {{#if_eq Opcion1.Respuesta true}}
                        <input type="radio" name="opcionSimple" value="opcionSimple1" id="opcionSimple1" checked="checked" commonid="{{Opcion1.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 1<br />
                        {{/if_eq}}{{#if_eq Opcion1.Respuesta false}}
                        <input type="radio" name="opcionSimple" value="opcionSimple1" id="opcionSimple1" commonid="{{Opcion1.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 1<br />
                        {{/if_eq}}
                    </div>
                </div>
                <div class="panel-body" >
                    <label for="inputOpcionSimple2" class="col-sm-2 control-label">Opción 2 </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="inputOpcionSimple2" placeholder="Opcion2" value="{{Opcion2.Descripcion}}" aria-multiline="true">
                    </div>
                    <div class="col-sm-2">
                        {{#if_eq Opcion2.Respuesta true}}
                        <input type="radio" name="opcionSimple" value="opcionSimple2" id="opcionSimple2" checked="checked" commonid="{{Opcion2.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 2<br />
                        {{/if_eq}}{{#if_eq Opcion2.Respuesta false}}
                        <input type="radio" name="opcionSimple" value="opcionSimple2" id="opcionSimple2" commonid="{{Opcion2.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 2<br />
                        {{/if_eq}}
                    </div>
                </div>
                <div class="panel-body" >
                    <label for="inputOpcionSimple3" class="col-sm-2 control-label">Opción 3 </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="inputOpcionSimple3" placeholder="Opcion3" value="{{Opcion3.Descripcion}}" aria-multiline="true">
                    </div>
                    <div class="col-sm-2">
                        {{#if_eq Opcion3.Respuesta true}}
                        <input type="radio" name="opcionSimple" id="opcionSimple3" value="opcionSimple3" checked="checked" commonid="{{Opcion3.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 3<br />
                        {{/if_eq}}{{#if_eq Opcion3.Respuesta false}}
                        <input type="radio" name="opcionSimple" id="opcionSimple3" value="opcionSimple3" commonid="{{Opcion3.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 3<br />
                        {{/if_eq}}
                    </div>
                </div>
                <div class="panel-body" >
                    <label for="inputOpcionSimple4" class="col-sm-2 control-label">Opción 4 </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="inputOpcionSimple4" placeholder="Opcion4" value="{{Opcion4.Descripcion}}" aria-multiline="true">
                    </div>
                    <div class="col-sm-2">
                        {{#if_eq Opcion4.Respuesta true}}
                        <input type="radio" name="opcionSimple" value="opcionSimple4" id="opcionSimple4" checked="checked" commonid="{{Opcion4.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 4<br />
                        {{/if_eq}}{{#if_eq Opcion4.Respuesta false}}
                        <input type="radio" name="opcionSimple" value="opcionSimple4" id="opcionSimple4" commonid="{{Opcion4.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 4<br />
                        {{/if_eq}}
                    </div>
                </div>                
            </div>


            <div id="opcionesSeleccionMultiple" class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Opciones</h3>
                </div>
                <div class="alert alert-info" role="alert">
                    <p style="text-align:center"><b>Ingrese las posibles respuestas a la pregunta y elija las OPCIONES que desea que sean las CORRECTAS.</b></p>
                </div>
                <div class="panel-body" id="opcion">
                    <label for="inputOpcionMultiple1" class="col-sm-2 control-label">Opción 1 </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="inputOpcionMultiple1" placeholder="Opcion1" value="{{Opcion1.Descripcion}}" aria-multiline="true">
                    </div>
                    <div class="col-sm-2">
                        {{#if_eq Opcion1.Respuesta true}}
                        <input type="checkbox" name="opcionMultiple" id="opcionM1" value="opcion1" checked="checked" commonid="{{Opcion1.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 1<br />
                        {{/if_eq}}{{#if_eq Opcion1.Respuesta false}}
                        <input type="checkbox" name="opcionMultiple" id="opcionM1" value="opcion1" commonid="{{Opcion1.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 1<br />
                        {{/if_eq}}
                    </div>
                </div>
                <div class="panel-body" id="opcionMultiple2">
                    <label for="inputOpcionMultiple2" class="col-sm-2 control-label">Opción 2 </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="inputOpcionMultiple2" placeholder="Opcion2" value="{{Opcion2.Descripcion}}" aria-multiline="true">
                    </div>
                    <div class="col-sm-2">
                        {{#if_eq Opcion2.Respuesta true}}
                        <input type="checkbox" name="opcionMultiple" id="opcionM2" value="opcionMultiple2" checked="checked" commonid="{{Opcion2.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 2<br />
                        {{/if_eq}}{{#if_eq Opcion2.Respuesta false}}
                        <input type="checkbox" name="opcionMultiple" id="opcionM2" value="opcionMultiple2" commonid="{{Opcion2.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 2<br />
                        {{/if_eq}}
                    </div>
                </div>
                <div class="panel-body" id="opcionMultiple3">
                    <label for="inputOpcionMultiple3" class="col-sm-2 control-label">Opción 3 </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="inputOpcionMultiple3" placeholder="Opcion3" value="{{Opcion3.Descripcion}}" aria-multiline="true">
                    </div>
                    <div class="col-sm-2">
                        {{#if_eq Opcion3.Respuesta true}}
                        <input type="checkbox" name="opcionMultiple" id="opcionM3" value="opcionMultiple3" checked="checked" commonid="{{Opcion3.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 3<br />
                        {{/if_eq}}{{#if_eq Opcion3.Respuesta false}}
                        <input type="checkbox" name="opcionMultiple" id="opcionM3" value="opcionMultiple3" commonid="{{Opcion3.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 3<br />
                        {{/if_eq}}
                    </div>
                </div>
                <div class="panel-body" id="opcion4">
                    <label for="inputOpcionMultiple4" class="col-sm-2 control-label">Opción 4 </label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="inputOpcionMultiple4" placeholder="Opcion4" value="{{Opcion4.Descripcion}}" aria-multiline="true">
                    </div>
                    <div class="col-sm-2">
                        {{#if_eq Opcion4.Respuesta true}}
                        <input type="checkbox" name="opcionMultiple" id="opcionM4" value="opcionMultiple4" checked="checked" commonid="{{Opcion4.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 4<br />
                        {{/if_eq}}
                        {{#if_eq Opcion4.Respuesta false}}
                        <input type="checkbox" name="opcionMultiple" id="opcionM4" value="opcionMultiple4" commonid="{{Opcion4.IdOpcion}}">&nbsp;&nbsp;&nbsp; Opcion 4<br />{{/if_eq}}
                    </div>
                </div>                
            </div>


            <br />
            <br />
            <div class="form-group">
                <div class="container-fluid">
                    <div class=" col-sm-offset-5 col-sm-1">
                        <a id="cancelar" class="btn btn-primary" href="/preguntas" style="text-align: left"><i class="fa fa-remove"></i>Cancelar</a>
                    </div>
                    <div class="col-sm-1">
                        <a id="guardar" class="btn btn-primary guardar" href="#" style="text-align: left"><i class="fa fa-save"></i>Guardar</a>
                    </div>
                </div>
            </div>
        </form>

        <a id="navigatePregunta" href="#" style="visibility: hidden" />
    </div>


</div>
